<template>
	<div class="coupon bg-f5">
		<van-tabs swipeable>
		  	<van-tab v-for="(item,index) in title_data" :title="item.name" :key="index"> 
		  		<ul class="auto w92">
		  			<li class="mt15 layout-juscon">
		  				<p class="white align-center coupon-price coupon-img">50<i class="fs16">元</i></p>
						<div class="pl10 pr10 pt15 pb10 flex_1 bg-white full-height">
							<p class="fs14 c333 ellipise bold">全场通用(特价秒杀等商品除外)</p>
							<p class="fs14 c68">5000积分兑换<i class="ml5 fs10 white radius integral">通用券</i></p>
							<div class="layout">
								<span class="fs10 c81 ">有效期:3个月</span>
								<button class="border fs12 pt5 pb5 pl10 pr10 btn">立即兑换</button>
							</div>
						</div>
		  			</li>
		  			<li class="mt15 layout-juscon">
		  				<p class="white align-center coupon-price coupon-img">50<i class="fs16">元</i></p>
						<div class="pl10 pr10 pt15 pb10 flex_1 bg-white full-height pos-rel">
							<p class="fs14 c333 ellipise bold">全场通用(特价秒杀等商品除外)</p>
							<p class="fs14 c68 ">5000积分兑换<i class="ml5 fs10 white radius integral">通用券</i></p>
							<div class="layout">
								<span class="fs10 c81">有效期:3个月</span>
							</div>
							<img class="pos-abs icon-img" src="../../../assets/coupon-icon.png" alt="">
						</div>
		  			</li>
		  		</ul>
		 	</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import { Tab, Tabs } from 'vant';
	export default{
		components: {
			Tab,
			Tabs,
		},
		data()
		{
			return{
				title_data : [
					{ name: '未使用' },
					{ name: '已使用' },
					{ name: '已失效' },
				],
			}
		},
		methods:
		{

		}
	}
</script>

<style lang="less">
	.coupon{
		.van-tabs__line{
			display: none;
		}
		.van-tab--active{
			position: relative;
		}
		.van-tab--active:before{
			content:"";
			width: 30px;
			height: 2px;
			background-color: #f44;
			position: absolute;
			left:50%;
			bottom: 2px;
			transform: translate(-50%,50%);
		}
		.coupon-price{
			width: 115px;
			font-size: 50px;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 100% 100%;
		}
		.coupon-img{
			background-image: url(../../../assets/coupon-bg.png);
		}
		.coupon-img2{
			background-image: url(../../../assets/coupon-bg2.png);
		}
		.integral{
			background-color:#f78182;
			padding:2px 5px
		}
		.btn{
			border-color:#f78182;
			color:#fa5f6f;
			border-radius: 15px;
		}
		.icon-img{
			width: 59px;
			bottom: 0px;
			right:  1rem;
		}
	}
</style>
